import React from "react";
import { Link, Routes, Route, useLocation } from "react-router-dom";

const Home = () => {
  // console.log(props);
  const location = useLocation();
  console.log(location);
  return <div>home组件</div>;
};

class About extends React.Component {
  render() {
    return <div>about组件</div>;
  }
}

const App = () => {
  return (
    <>
      <h3>router-v6-basic</h3>
      <ul>
        <li>
          <Link to="/">home</Link>
        </li>
        <li>
          <Link to="/about">about</Link>
        </li>
      </ul>

      <hr />

      {/* 新版本Switch要换成Routes */}
      {/* Routes组件一定要加, 默认就是排他性路由, 默认就是精准匹配, 也不必再使用exact精准匹配了 */}
      <Routes>
        {/* 渲染组件只有一种方式: element */}
        {/* element属性里面不是写组件名了，而是写组件的实例化的标签 */}
        {/* element既可以渲染函数组件，也可以渲染类组件 */}
        {/* 默认情况下是拿不到路由信息了 */}
        {/* 要拿路由信息需要借助hooks */}
        <Route path="/" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
      </Routes>
    </>
  );
};

export default App;
